<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<p>写死的数据</p>
			<!--
				文本插值
					{{表达式}}  小胡子语法 “Moustache”
			-->
			<p>{{mes}}</p>
		</div>
		<script>
			// 数据展示在页面中
			let message = 'hello,vue';

			// 页面 = 数据 + 模板（html结构）

			// 启动整个应用
			// 告诉vue做什么事情  选项对象
			var app = document.getElementById('app')
			new Vue({
				el: app, //element  告诉vue那一块归vue管理
				data: {  // 数据对象  属性直接可以在模板中使用
					mes: message
				}
			})

		</script>
	</body>
</html>